<template>
  <div class="answer">
    <h2 class="header">试卷批改</h2>
    <el-form label-width="120px" @submit.native.prevent="save">
      
      <el-form-item label="单选得分">
        <el-input  v-model="model.singleScore" disabled></el-input>
        <button @click="single()" style="width:140px;height:30px;color:#000">点击获取单选得分</button>
      </el-form-item>
       <el-form-item label="试卷名称">
        <el-input  v-model="model.title" ></el-input>
      </el-form-item>
       <el-form-item label="出题人">
        <el-input  v-model="model.bywho" ></el-input>
      </el-form-item>
       <el-form-item label="总分">
        <el-input  v-model="model.totalscore" ></el-input>
      </el-form-item>
       <el-form-item label="得分">
        <el-input  v-model="model.score" ></el-input>
      </el-form-item>
       <el-form-item label="总题数">
        <el-input  v-model="model.totalTitle" ></el-input>
      </el-form-item>
       <el-tabs value="multiple" type="border-card">
          <el-tab-pane name="multiple" label="多选题">
             <el-form-item label="多选得分">
        <el-input  v-model="model.multipleScore"></el-input>
      </el-form-item>
             <el-row>
            <el-col :md="12" v-for="(item, index) in model.multiple" :key="item._id">
               <span>{{index + 1}}、</span>
            <el-form-item label="单题得分">
               <el-input-number v-model="item.score" :min="0" :max="10" label="描述文字"></el-input-number>
              </el-form-item>
              <el-form-item label="题目">
                <div>{{item.title}}</div>
              </el-form-item>
              <el-form-item label="选项" >
               
              <div style="display: flex;  align-items: center;" v-for="option in item.multipleOption" :key="option._id" >
                <input type="checkbox" v-model="item.pick" :name="`${item._id}`" :value="`${option._id}`" >
                <div >{{option.answer}}</div>
    
                  </div>
                   
           
               
              </el-form-item>
            </el-col>
             </el-row>
          </el-tab-pane>
          <el-tab-pane name="judge" label="判断题">
             <el-form-item label="判断得分">
        <el-input  v-model="model.judgeScore"></el-input>
      </el-form-item>
             <el-row>
            <el-col :md="12" v-for="(item, index) in model.judge" :key="item._id">
               <span>{{index + 1}}、</span>
           <el-form-item label="单题得分">
               <el-input-number v-model="item.score" :min="0" :max="10" label="描述文字"></el-input-number>
              </el-form-item>
              <el-form-item label="题目">
                <div>{{item.title}}</div>
              </el-form-item>
              <el-form-item label="选项" >
               
              <div class="mb-3"> <input type="radio" :name="item._id" value="1"  v-model="item.question"><label >1</label></div>
    <div><input type="radio" :name="item._id" value="0"  v-model="item.question"><label>0</label></div>
                   
           
               
              </el-form-item>
              <el-form-item label="正确答案">
                <div>{{item.pick}}</div>
              </el-form-item>
            </el-col>
             </el-row>
          </el-tab-pane>
           <el-tab-pane name="fill" label="填空题">
             <el-form-item label="填空得分">
        <el-input  v-model="model.fillScore"></el-input>
      </el-form-item>
             <el-row>
            <el-col :md="12" v-for="(item, index) in model.fill" :key="item._id">
               <span>{{index + 1}}、</span>
            <el-form-item label="单题得分">
               <el-input-number v-model="item.score" :min="0" :max="10" label="描述文字"></el-input-number>
              </el-form-item>
              <el-form-item label="题目">
                <div>{{item.title}}</div>
              </el-form-item>
              
              <el-form-item label="考生答案">
                <div>{{item.answer}}</div>
              </el-form-item>

              <el-form-item label="正确答案">
                <div>{{item.pick}}</div>
              </el-form-item>
            </el-col>
             </el-row>
          </el-tab-pane>
           <el-tab-pane name="discuss" label="论述题">
             <el-form-item label="论述得分">
        <el-input  v-model="model.discussScore"></el-input>
      </el-form-item>
             <el-row>
            <el-col :md="12" v-for="(item, index) in model.discuss" :key="item._id">
               <span>{{index + 1}}、</span>
            <el-form-item label="单题得分">
               <el-input-number v-model="item.score" :min="0" :max="10" label="描述文字"></el-input-number>
              </el-form-item>
              <el-form-item label="题目">
                <div>{{item.title}}</div>
              </el-form-item>
              
              <el-form-item label="考生答案">
                <div>{{item.question}}</div>
              </el-form-item>

              <el-form-item label="正确答案">
                <div>{{item.answer}}</div>
              </el-form-item>
            </el-col>
             </el-row>
          </el-tab-pane>
       </el-tabs>
     

      
    
      <el-form-item >
       <el-button type="primary" native-type="submit" style="float: right">提交</el-button>
      </el-form-item>
    </el-form>
    
  </div>
</template>

<script>
export default {
  props:{
   id: {
     type: String
   }
  },
  data() {
    return {
      model: {
      singleScore: '',
      multipleScore: '',
      judgeScore: '',
      discussScore: ''
      },
      categories: {},
      answer: {

      },
      singletrues: [],
      singleyouOption: [],
      judgetrues: [],
      judgeyouOption: [],
 
      
    }
  },
methods: {
  single() {
this.model.single.forEach(ele => {
  ele.singleOption.forEach((eles => {
    if (eles.pick == '1') {
   this.singletrues.push(eles._id)
    }
  }))
});

this.model.single.forEach(ele => {
  this.singleyouOption.push(ele.pick)

})

let singlenewArr = [];
    for (let i = 0; i < this.singletrues.length; i++) {
        for (let j = 0; j < this.singleyouOption.length; j++) {
            if(this.singleyouOption[j] === this.singletrues[i]){
                singlenewArr.push(this.singletrues[i])
            }
        }
    }
    
this.model.single.forEach(ele => {
    this.model.singleScore = singlenewArr.length * Number(ele.score)

})

    
  //   console.log(newArr.length);
  //   console.log(this.model.singleScore)
  // console.log(this.trues);
  // console.log(this.youOption);

  },
  async save() {
    let res 
    if (this.id) {
   res = await this.$http.put(`/student/answer/${this.id}`, this.model)
    } else {
    res = await this.$http.post('/student/answer', this.model)
    }
    this.$router.push('/answer/list')
    this.$message({
      type: 'success',
      message: '保存成功'
    })
  },
  async fetchData() {
const res = await this.$http.get(`/student/answer/${this.id}`)
this.model = res.data
this.model.multiple.forEach(ele => {
ele.multipleOption.forEach(eles => {
  if (eles.pick === '1') {
     eles.answer = '正确答案√'
  } else {
    eles.answer = '错误答案×'
  } 

})
})
  },
//   async fetchpick() {
// const res = await this.$http.get(`/test/${this.id}`)
// this.answer = res.data
//   }
},
created() {
  this.id && this.fetchData()
  this.id && this.fetchpick()
}
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 400px;
    height: 180px;
    line-height: 180px;
    text-align: center;
  }
  .avatar {
    width: 400px;
    height: 180px;
    display: block;
  }
.header {
  text-align: center;
}
.date {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.duration .el-input {
  position: relative;
width: 260px;
}
.duration button {
  position: absolute;
  top: 2px;
  left: 160px;
  width: 100px;
  height: 38px;
  outline: none;
  border: 0;
  border-radius: 2px;
  background-color: #F5F7FA;
}

</style>